<template>
	<el-tabs type="card" v-model="editableTabsValue" closable @tab-remove="removeTab">
		<el-tab-pane
		v-for="(item, index) in editableTabs"
		:key="item.name"
		:label="item.title"
		:name="item.name"
		>
		<keep-alive>
		  <component v-bind:is="item.content"></component>
		</keep-alive>
	</el-tab-pane>
</el-tabs>
</template>
<script type="text/javascript">
	export default{
		data() {
			return{
				editableTabsValue:'',
				editableTabs:[],
				tabIndex:0,
			}
		},
		methods:{
			addTab(targetName,target){
				if(this.checkTab(targetName,target)){
					return;
				}
				let newTabName = ++this.tabIndex + '';
				let tabContent = target.linkUrl;
				if(tabContent){
					this.editableTabs.push({
					title: target.moduleName,
					name: target.moduleName,
					content:() => import(`@/${tabContent}`)
				});
				this.editableTabsValue = target.moduleName;
				}
			},
			removeTab(targetName) {
				let tabs = this.editableTabs;
				let activeName = this.editableTabsValue;
				if (activeName === targetName) {
					tabs.forEach((tab, index) => {
						if (tab.name === targetName) {
							let nextTab = tabs[index + 1] || tabs[index - 1];
							if (nextTab) {
								activeName = nextTab.name;
							}
						}
					});
				}

				this.editableTabsValue = activeName;
				this.editableTabs = tabs.filter(tab => tab.name !== targetName);
			},
			checkTab(targetName,target){
				let tabs = this.editableTabs;
				let isActive=false;
				tabs.forEach((tab,index) => {
					if (tab.name==targetName) {
						this.editableTabsValue = target.moduleName;
						isActive=true;
					}
				});
				return isActive;
			}
		}
	}
</script>